<template>
	<view class="renewal-details" >
		<view class="details-box" >
			<view>
				合同编号：<span class="font-bold" >20180306174536002</span>
			</view>
			<view>
				逝者姓名：<span>郝玉甲</span>
			</view>
			<view>
				入馆日期：<span>2018-05-06 17:45</span>
			</view>
			<view>
				所在馆区：<span>青竹镇-A区-1排-20号</span>
			</view>
			<view>
				服务到期日期：<span>2021-05-06 17:45</span>
			</view>
			<span class="box-btn">收费须知</span>
		</view>
		
		<view class="details-form" >
			<view style="padding:30upx 20upx 20upx 50upx;" >选择年限</view>
			<u-form :model="formData" ref="uForm">
				<u-form-item  >
					<u-radio-group v-model="formData.radioValue">
						<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name">
							<view class="radio-box">
								<span>{{ item.name }} </span>
								<span>{{item.price}}</span>
							</view>
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</u-form>
		</view>
		
		<view class="add-btn" >
			<span>确认支付</span>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData:{
					radioValue:''
				},
				radioList: [
					{
						name: '3年',
						price:'￥5000'
					},
					{
						name: '5年',
						price:'￥1万'
					},
					{
						name: '10年',
						price:'￥2万'
					},
					{
						name: '20年',
						price:'￥3万'
					},
					{
						name: '3年',
						price:'￥5000'
					}
				]
			};
		},
		
		methods:{
			submit() {
				// this.$refs.uForm.validate(valid => {
				// 	if (valid) {
				// 		console.log('验证通过');
				// 	} else {
				// 		console.log('验证失败');
				// 	}
				// });
			}
		}
	}
</script>

<style lang="less">
.renewal-details{
	font-size: 28upx;
	color: #000000;
	position: relative;
	
	.details-box{
		display: flex;
		flex-direction: column;
		padding:0 20upx 20upx 50upx;
		position: relative;
		border-bottom: 2upx solid #dbdbdb;
		view{
			flex: 1;
			margin-bottom: 30upx;
			.font-bold{
				font-weight: bold;
			}
		}
		.box-btn{
			position: absolute;
			top: 18upx;
			right: 0;
			font-size: 28upx;
			color: #101010;
			padding: 4upx 24upx 4upx 28upx;
			border: 1upx solid #101010;
			border-radius: 40upx 0 0 40upx;
		}
		
		.btns-div{
			height: 60upx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding:0 80upx ;
			margin: 34upx 0 10upx 0;
			span{
				border-radius: 6upx;
				padding: 10upx 14upx;
				color: #fff0f3;
				background: #f9c38c;
			}
		}
	}
	
	.details-form{
		/deep/ .u-radio{
			 float: none!important;
			 display: flex!important;
			 padding:30upx 0;
			 border-bottom: 1upx solid #888;
			 margin:0 30upx;
			.radio-box{
			 	// display: flex;
			 	// justify-content: space-between;
				width: calc(100vw - 120upx);
			 	font-size: 32upx;
			 	span:last-child{
			 		color: #f59b22;
					float: right;
			 	}
			}
		}
	}
	
	.add-btn{
		text-align: center;
		height: 90upx;
		line-height: 90upx;
		margin-top:50upx;
		margin-bottom: 30upx;
		span{
			font-size: 32upx;
			color: #ffffff;
			background: #f5942b;
			padding: 14upx 74upx;
			border-radius: 6upx;
		}
	}
}
</style>
